import React from 'react';
import PropTypes from 'prop-types';
import { Image, View } from 'react-native';

import fn from './PlateformHalf';

const SystemIcon = ({ icoName, onClick }) => {
  const commonImageView = {
    overflow: 'hidden',
    backgroundColor: 'rgba(0,0,0,0)',
  };
  const commonImageSize = {
    width: fn(449),
    height: fn(139),
  };
  const clearIconView = {
    width: fn(36),
    height: fn(37),
  };
  const clearIconPos = {
    left: fn(-184),
    top: 0,
  };
  // 返回 backIcon
  const backIconView = {
    width: fn(16),
    height: fn(30),
  };
  const backIconPos = {
    left: fn(-1),
    top: 0,
  };
  const backIconThemePos = {
    left: fn(-27),
    top: 0,
  };
  // 圆勾选 radioIcon
  const radioIconView = {
    width: fn(30),
    height: fn(21),
  };
  const radioIconPosOff = {
    left: fn(-89),
    top: 0,
  };
  const radioIconPosOn = {
    left: fn(-51),
    top: 0,
  };
  // checkBox勾选 checkBoxIcon
  const checkBoxIconView = {
    width: fn(16),
    height: fn(12),
  };
  const checkBoxIconPosOn = {
    left: fn(-130),
    top: fn(-1),
  };
  // imagePicker加号
  const addIconView = {
    width: fn(64),
    height: fn(64),
  };
  const addIconPos = {
    left: fn(-237),
    top: fn(-56),
  };
  // 向右箭头
  const rightArrowIconView = {
    width: fn(18),
    height: fn(30),
  };
  const rightArrowIconPos = {
    left: fn(-156),
    top: 0,
  };
  // 模态关闭按钮
  const canCloseIconView = {
    width: fn(32),
    height: fn(32),
  };
  const canCloseIconPos = {
    left: fn(-304),
    top: 0,
  };
  // NoticeArrow && horn
  const noticeArrowIconView = {
    width: fn(14),
    height: fn(25),
  };
  const noticeArrowIconPos = {
    left: fn(-231),
    top: 0,
  };
  const hornIconView = {
    width: fn(32),
    height: fn(32),
  };
  const hornIconPos = {
    left: fn(-254),
    top: 0,
  };
  // toast
  const toastIconView = {
    width: fn(72),
    height: fn(72),
  };
  const toastSuccessIconPos = {
    left: fn(-80),
    top: fn(-49),
  };
  const toastErrorIconPos = {
    left: fn(-159),
    top: fn(-49),
  };
  const toastWarnIconPos = {
    left: fn(-1),
    top: fn(-49),
  };


  let nowImageView = null;
  let nowImage = null;
  switch (icoName) {
    case 'back':
      nowImageView = backIconView;
      nowImage = backIconPos;
      break;
    case 'backTheme':
      nowImageView = backIconView;
      nowImage = backIconThemePos;
      break;
    case 'radioOn':
      nowImageView = radioIconView;
      nowImage = radioIconPosOn;
      break;
    case 'radioOff':
      nowImageView = radioIconView;
      nowImage = radioIconPosOff;
      break;
    case 'checkBoxOn':
      nowImageView = checkBoxIconView;
      nowImage = checkBoxIconPosOn;
      break;
    case 'add':
      nowImageView = addIconView;
      nowImage = addIconPos;
      break;
    case 'rightArrow':
      nowImageView = rightArrowIconView;
      nowImage = rightArrowIconPos;
      break;
    case 'noticeArrow':
      nowImageView = noticeArrowIconView;
      nowImage = noticeArrowIconPos;
      break;
    case 'horn':
      nowImageView = hornIconView;
      nowImage = hornIconPos;
      break;
    case 'toastSuccess':
      nowImageView = toastIconView;
      nowImage = toastSuccessIconPos;
      break;
    case 'toastError':
      nowImageView = toastIconView;
      nowImage = toastErrorIconPos;
      break;
    case 'toastWarn':
      nowImageView = toastIconView;
      nowImage = toastWarnIconPos;
      break;
    case 'clear':
      nowImageView = clearIconView;
      nowImage = clearIconPos;
      break;
    case 'canClose':
      nowImageView = canCloseIconView;
      nowImage = canCloseIconPos;
      break;
    default:
      return null;
  }
  return (
    <View
      onTouchEnd={onClick}
      onClick={onClick}
      style={{ ...commonImageView, ...nowImageView }}
    >
      <Image
        source={{ uri: 'https://web.wolaidai.com/common/images/fxui/fxui-orange-theme2x.png' }}
        style={{ ...commonImageSize, ...nowImage }}
      />
    </View>
  );
};


SystemIcon.defaultProps = {
  icoName: null,
  onClick: null,
};
SystemIcon.propTypes = {
  /**
   * ### SystemIcon 属性说明
   *
   * 系统图标组件UI
   *
   * | Name | Type | Default | Details | isRequired |
   * | ------:| -----------:| -----------: | -----------: | ------:|
   * | icoName | string | | 图标名称 |yes|
   * | onClick | object | | 点击事件 |no|
   *
   * ### SystemIcon 代码示例(详见示例项目)
   *
   * ```html
   * <SystemIcon icoName="canClose" />
   * ```
   */
  icoName: PropTypes.string,
  onClick: PropTypes.func,

};
export default SystemIcon;
